<!DOCTYPE html>
<html style="height: 100%">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/dataTool.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=wvGuSDMA4xjj0t1dPqEtibPvXY5gyN4U"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/extension/bmap.min.js"></script>
    <script type="text/javascript" src="./3.js"></script>

    <script type="text/javascript">
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var ROOT_PATH = 'https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples';
        var buildingsGeoJSON = data;

        echarts.registerMap('buildings', buildingsGeoJSON);

        var regions = buildingsGeoJSON.features.map(function (feature) {
            return {
                name: feature.properties.name,
                value: Math.max(Math.sqrt(feature.properties.height), 0.1),
                height: Math.max(Math.sqrt(feature.properties.height), 0.1)
            };
        });


        myChart.setOption({
            series: [{
                type: 'map3D',
                map: 'buildings',
                shading: 'realistic',
                realisticMaterial: {
                    roughness: 1,
                    textureTiling: 20,
                    detailTexture: 'logo.png'
                },
                lambertMaterial: {
                    roughness: 1,
                    textureTiling: 20,
                    detailTexture: 'head.jpg'
                },
                colorMaterial: {
                    roughness: 1,
                    textureTiling: 20,
                    detailTexture: 'head.jpg'
                },
                postEffect: {
                    enable: true,
                    bloom: {
                        enable: false
                    },
                    SSAO: {
                        enable: true,
                        quality: 'medium',
                        radius: 10,
                        intensity: 1.2
                    },
                    depthOfField: {
                        enable: false,
                        focalRange: 5,
                        fstop: 1,
                        blurRadius: 6
                    }
                },
                groundPlane: {
                    show: true,
                    color: '#333'
                },
                light: {
                    main: {
                        intensity: 6,
                        shadow: true,
                        shadowQuality: 'high',
                        alpha: 30
                    },
                    ambient: {
                        intensity: 0
                    },
                    ambientCubemap: {
                        texture: ROOT_PATH + '/data-gl/asset/canyon.hdr',
                        exposure: 2,
                        diffuseIntensity: 1,
                        specularIntensity: 1
                    }
                },
                viewControl: {
                    minBeta: -360,
                    maxBeta: 360
                },

                itemStyle: {
                    areaColor: '#666'
                },

                label: {
                    color: 'white'
                },

                silent: true,

                instancing: true,

                boxWidth: 200,
                boxHeight: 1,

                data: regions
            }]
        });

    </script>
</body>
</html>
